// 新闻列表数据的表格渲染

// 定义全局筛选条件的变量
let query = {
    cate_id: 0,
    title: ''
}

layui.use(['table', 'form'], function() {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;


    // 下拉框的选择事件
    form.on('select', function(data) {
        query.cate_id = data.value

        // 重新渲染数据
        renderMyTable()
    })

    //搜索按钮的点击事件
    $('.search').click(function(e) {
        // 阻止提交的按钮的默认表单提交行为
        e.preventDefault()

        query.title = $('#title').val().trim()

        // 重新渲染数据
        renderMyTable()
    })



    // 打开添加新闻的遮罩层
    $('.news-add').click(function() {
        layer.open({
            type: 2,
            title: '新闻添加',
            area: ['60%', '80%'],
            content: ['/news/add'],
            end: function() {
                renderMyTable()
            }
        })
    })


    // 页面加载时渲染表格
    renderMyTable()

    // 渲染表格
    function renderMyTable() {
        // 创建渲染实例
        table.render({
            // 绑定的表格的dom对象
            elem: '#cate',
            // 表格的数据接口地址,模拟接口数据，将来改成自己的数据接口
            url: '/news/listApi',
            // 带其他的参数
            where: query,
            // 绑定的工具栏
            // toolbar: '#toolbarDemo',
            // 工具栏的选项
            defaultToolbar: ['exports', 'print'],
            // 表格的高度：最大高度减去其他容器已占有的高度差
            // height: 'full-200',
            // 单元格的最小宽度
            // cellMinWidth: 100,
            // width: 600,
            // 是否开启分页
            page: true,
            // 每页显示的条数,
            limit: 2,
            // 每页条数的选择项
            limits: [3, 6, 9, 12, 15],
            // 列选项，需要数据（数组对象的属性）保持一致
            cols: [
                [{
                        type: 'checkbox'
                    }, {
                        field: 'index',
                        width: 80,
                        title: '#'
                    }, {
                        field: 'title',
                        width: 180,
                        title: '标题',
                        templet: function(d) {
                            let search = query.title
                            if (search.length > 0) {
                                let reg = new RegExp(`${search}`, 'gi')
                                return d.title.replace(reg,
                                    `<span style="color:red">${search}</span>`)
                            } else {
                                return d.title
                            }
                        }
                    }, {
                        field: 'cate_name',
                        width: 120,
                        title: '分类名称',
                        templet: function(d) {
                            // 得到真正的分类数据
                            return d.Cate.cate_name
                        }
                    }, {
                        field: 'picture',
                        width: 180,
                        title: '图片',
                        templet: function(d) {
                            // 使用img标签包裹图片
                            return `<img src="${d.picture}">`
                        }
                    }, {
                        field: 'author',
                        width: 100,
                        title: '作者'
                    }, {
                        field: 'add_time',
                        width: 180,
                        title: '发布时间'
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        width: 150,
                        minWidth: 150,
                        // 工具列
                        toolbar: '#op'
                    }
                ]
            ],
            // 表格加载失败的的回调函数
            error: function(res, msg) {
                console.log(res, msg)
            }
        });

    }


    //触发单元格工具事件（删除和修改）
    table.on('tool(test)', function(obj) { // 双击 toolDouble
        // 保留了要操作的数据
        var id = obj.data.id;
        if (obj.event === 'del') {
            layer.confirm('您确定要删除吗?', function(index) {
                axios({
                    method: 'delete',
                    url: `/news/${id}`
                }).then(res => {
                    if (res.data.status !== 200) {
                        return layer.msg('删除失败', {
                            icon: 5
                        })
                    }
                    layer.msg('删除成功', {
                        icon: 6
                    }, function() {
                        // 页面删除
                        // obj.del();
                        // layer.close(index);
                        // 重新渲染表格
                        renderMyTable()
                    })
                })
            });
        } else if (obj.event === 'edit') {
            layer.open({
                title: '新闻修改',
                type: 2,
                area: ['60%', '80%'],
                content: `/news/${id}/edit`,
                // 弹出层销毁时的回调
                end: function() {
                    // 重新渲染表格
                    renderMyTable()
                }
            });
        }
    });

    // 单元格编辑事件
    table.on('edit(test)', function(obj) {
        var field = obj.field, //得到字段
            value = obj.value, //得到修改后的值
            data = obj.data; //得到所在行所有键值
        // 发送请求去数据库修改分类名称
        axios({
            method: 'PUT',
            url: ` / cates / $ { data.id }
                            /updateCateName`,
            data
        }).then(res => {
            if (res.data.status === 200) {
                layer.msg('修改成功', {
                    icon: 6,
                    time: 2000
                }, function() {
                    // 页面的修改
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                })
            } else {
                layer.msg('修改失败', {
                    icon: 5,
                    time: 3000
                }, function() {
                    // 重新刷新页面
                    location.reload()
                })
            }
        })
    });

    //全选和全不选
    table.on('checkbox(test)', function(obj) {
        console.log(obj)
    });


});